<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>6_固定定位广告条</title>
    <style>
        .top{
            height: 120px;
            width: 100vw;
            background-color: #5aa4ae;
            font-size: 30px;
            position: fixed;
            top: 0;
        }
        .main{
           margin-top: 130px;
        }
        .left,.right{
            height: 200px;
            width: 60px;
            background-color: #5aa4ae;
            font-size: 30px;
            position: fixed;
            top: 300px;
        }
        .left{
           left: 20px;
            background-color: #fff799;
        }
        .right{
            right: 20px;
            background-color: #f35336;
        }
    </style>
</head>
<body>
    <div class="top">我是的顶部广告条</div>
    <div class="left">我是左侧的广告条</div>
    <div class="right">我是右侧的广告条</div>
    <div class="main">
        我是内容
        <div>Lorem ipsum dolor sit amet, consectetur adipisicing elit. A alias atque aut dolores error ipsam iste,
            itaque maiores minus natus neque nisi perferendis? Blanditiis consequuntur dignissimos esse porro sit
            soluta!
        </div>
        <div>Aperiam asperiores aspernatur beatae blanditiis corporis culpa cumque earum eligendi eos explicabo fugiat
            odit quas repudiandae sit tenetur, unde voluptas. Ab delectus ducimus enim illum minus numquam placeat
            ratione vero.
        </div>
        <div>Accusantium animi aspernatur autem beatae cupiditate distinctio doloremque, esse eum fuga id illo laborum
            libero maiores, nemo perspiciatis porro praesentium provident quidem quis quisquam reprehenderit velit vitae
            voluptatem! Numquam, pariatur.
        </div>
        <div>Aliquid animi autem dignissimos dolores doloribus, eaque eos et excepturi explicabo hic impedit iusto
            maxime minus molestias odit optio, possimus quisquam rem sapiente sed soluta tempore velit vero voluptas
            voluptatibus.
        </div>
        <div>Aliquid animi culpa dolor exercitationem hic ipsa ipsum, iure necessitatibus obcaecati repellendus, soluta
            totam voluptas. A aliquid aspernatur aut, blanditiis corporis ea est facere id ipsam, magnam nihil sunt
            voluptate?
        </div>
        <div>Aliquid aperiam at cumque debitis deleniti deserunt fuga harum impedit, in laboriosam maxime, neque
            officiis provident ratione recusandae similique sunt tempore temporibus ullam voluptatem! At consequuntur
            illo nobis rerum voluptatum!
        </div>
        <div>A accusamus aliquam aliquid animi atque consequatur debitis dignissimos dolore fuga fugiat, ipsa, iste
            itaque neque nobis nostrum numquam officia officiis perspiciatis quas quasi quod rem sed velit voluptatem
            voluptatibus!
        </div>
        <div>A assumenda aut consectetur cum cumque, debitis dicta doloremque dolorum enim eveniet ex expedita id
            impedit maxime molestias nisi omnis quae quos recusandae reiciendis repellat sit soluta velit vitae
            voluptatibus.
        </div>
        <div>Asperiores dolores excepturi, illo iure quas quo sapiente! Ea illum magnam minus, quidem similique soluta
            tenetur velit. Aperiam assumenda beatae ducimus est ex expedita fugiat pariatur tempora ullam voluptatem?
            Laborum.
        </div>
        <div>A architecto aspernatur consectetur cumque cupiditate deserunt distinctio doloribus earum esse id ipsa
            iusto modi molestiae neque non pariatur porro quaerat quam quas quos repellendus, saepe voluptas voluptate
            voluptatem voluptatum?
        </div>
        <div>A at cum deleniti distinctio ex ipsum minima quos, tempore voluptatem. Aspernatur facilis libero quisquam
            repudiandae saepe sed sunt? A adipisci, animi autem eaque eligendi eos ipsum molestias possimus provident?
        </div>
        <div>Aliquid delectus illum ipsa laudantium tempore? Asperiores aspernatur atque autem, beatae deserunt enim eos
            explicabo fugiat id, ipsam, magnam molestiae praesentium quae quibusdam recusandae repellat ut veritatis.
            Commodi quae, quis!
        </div>
        <div>Delectus dolorem iusto laboriosam maxime nesciunt quam sunt vel velit. Aspernatur cum cupiditate debitis
            dolore enim et eum expedita illo iure minima, nobis nulla, odit possimus quasi recusandae tenetur veniam!
        </div>
        <div>Hic id libero perspiciatis. A error esse est explicabo fugiat, minus nam odio porro repellendus sint sunt
            totam! Esse modi molestias nisi numquam pariatur. Cum in optio rem saepe suscipit.
        </div>
        <div>Aut cumque eveniet id ipsam iusto, nobis non quam repellendus reprehenderit. Asperiores debitis eaque
            inventore maiores odio. Adipisci, eaque mollitia optio perferendis quaerat rem sequi sit sunt tenetur unde
            vero!
        </div>
        <div>Animi atque libero magnam porro, quod repudiandae rerum sed. A deleniti, deserunt dolor dolorem doloremque
            eum eveniet facere, incidunt iste iure iusto minima, nihil nostrum omnis possimus quidem saepe voluptates!
        </div>
        <div>Ad dicta facilis in labore totam! Aliquid aperiam, architecto at blanditiis consectetur consequatur, eos
            esse expedita fuga inventore ipsam iusto laudantium maiores porro quaerat quam reiciendis sequi sunt vitae
            voluptatem.
        </div>
        <div>Aliquam, hic in maxime nulla quisquam rem sit? Accusantium at consequatur consequuntur ea illo ipsa
            molestias quasi quibusdam quod, repellendus similique sit soluta velit vitae voluptatem? Amet assumenda
            dolores sit?
        </div>
        <div>Aperiam cum eligendi iure laudantium nostrum perspiciatis quidem, quis? Ab alias delectus ea et fugit id
            laboriosam omnis temporibus. Aperiam commodi cumque dignissimos doloremque eum iste placeat porro recusandae
            totam?
        </div>
        <div>Assumenda dolore laudantium minus nihil quidem quos repellendus sed, tempora unde vitae! A adipisci
            asperiores autem delectus minima minus provident repellat sed ullam voluptatum. Animi deserunt eius et
            laboriosam perspiciatis.
        </div>
        <div>A cum doloremque harum, maiores porro rem repudiandae tenetur. Ab quibusdam sit soluta? Esse ipsa, iste
            magnam natus praesentium quidem recusandae. Culpa cumque earum expedita fugit maiores praesentium, quasi
            tenetur.
        </div>
        <div>Explicabo laudantium modi necessitatibus numquam pariatur quidem quis sed! Ab assumenda commodi culpa
            cumque excepturi magni nam necessitatibus omnis quam sequi? Distinctio dolorum eaque error ex nam officia,
            quisquam voluptas.
        </div>
        <div>A blanditiis consequatur cum eligendi fuga iusto magnam repellat voluptate. Culpa deserunt ducimus
            molestiae saepe voluptatibus! Adipisci animi cumque ea eum exercitationem, facilis, ipsum iste minus numquam
            praesentium quidem voluptatibus.
        </div>
        <div>Ipsa magni mollitia necessitatibus odit, quam quas reiciendis sapiente veritatis? Animi at, doloribus eius
            exercitationem expedita explicabo facere iure maiores modi, odio omnis quod ratione temporibus! At nulla
            quasi tempore.
        </div>
        <div>Aperiam eos mollitia nihil numquam pariatur perspiciatis vel. Accusantium, animi aspernatur corporis,
            doloremque fugit ipsam neque non quas sint unde voluptatibus voluptatum! Aut, cum harum qui quod repellendus
            rerum similique.
        </div>
        <div>A ex explicabo id nam nulla suscipit tempora voluptas. Eligendi expedita itaque libero nisi quaerat. Error
            placeat quis recusandae vitae! Aliquid ducimus eveniet nihil perferendis, tempore velit! Cum tempore,
            voluptas?
        </div>
        <div>Ab ad aperiam beatae blanditiis consequuntur cumque dolor dolorum ea eaque labore minus molestias, numquam
            officia pariatur, porro possimus recusandae repudiandae, sed suscipit velit vitae voluptatem voluptates
            voluptatum? Repellendus, sunt!
        </div>
        <div>Aspernatur corporis debitis dolor dolores ducimus eligendi error eveniet id itaque laboriosam libero
            magnam, mollitia obcaecati omnis pariatur perferendis provident quasi qui quis rerum, soluta totam unde
            veniam. Beatae, vero?
        </div>
        <div>Architecto consequatur delectus ducimus excepturi ipsum quae, repellendus ullam. Aliquam, aperiam
            asperiores culpa ipsa iste itaque maxime, nam nostrum, nulla optio quam repellat sunt veniam! Autem
            excepturi fugit praesentium quidem!
        </div>
        <div>Aut autem corporis cupiditate doloribus eligendi et illum, nostrum odio omnis provident quas quidem rem.
            Accusantium animi dolor doloremque explicabo molestias nostrum, nulla possimus, provident quo sed
            temporibus, ut voluptatem!
        </div>
        <div>A aperiam consequatur cumque cupiditate delectus dolores doloribus numquam quis vero. Atque cupiditate
            delectus dignissimos, expedita harum hic, libero molestiae pariatur provident quaerat qui repellendus saepe
            sequi, totam ut voluptatibus?
        </div>
        <div>Commodi consequatur, dolorum ducimus et eum fuga impedit ipsa, iure laborum, libero magnam nam nisi
            possimus praesentium quae reprehenderit sapiente sequi sunt voluptas voluptatem. A deleniti perspiciatis
            provident recusandae tempora!
        </div>
        <div>Aliquam, nisi veniam. Cumque eaque rem similique? Accusamus accusantium culpa eveniet explicabo hic illo
            ipsam itaque iure labore modi, nulla obcaecati optio quam quas reiciendis rem rerum. Ex, magni, sapiente.
        </div>
        <div>Error odit quis repellendus! Asperiores, cupiditate delectus, dicta ea eaque enim eos iure magnam maiores
            officiis pariatur perferendis provident quas quis sapiente similique tempora, veniam voluptatem! Nobis
            perspiciatis recusandae veritatis!
        </div>
        <div>Autem eius, eveniet fugiat ipsum itaque molestias mollitia nemo nihil omnis rerum sed sit veritatis!
            Aliquid corporis et eveniet ipsam labore modi, optio placeat porro, recusandae velit vitae, voluptatem
            voluptates.
        </div>
        <div>Accusantium aut beatae consequuntur ex, fugiat illum laudantium natus nostrum odio porro quaerat quisquam
            ut. Aliquam corporis dolores dolorum eius facere id illum in minus modi, non quibusdam rem ut.
        </div>
        <div>Atque doloribus earum est id incidunt ipsum, laboriosam laborum minima obcaecati perspiciatis quo repellat
            sint velit vero voluptatum? Asperiores eligendi expedita itaque magnam nobis nulla quaerat quod similique
            voluptatem voluptatibus.
        </div>
        <div>Ad aliquam aliquid aperiam asperiores blanditiis commodi, debitis dolorum esse fugiat incidunt, libero
            magnam quibusdam quidem quo soluta tempora ut voluptas! Dolorem facilis fuga id ipsam, molestias nesciunt
            quam reiciendis.
        </div>
        <div>Adipisci dicta, earum in mollitia officiis omnis soluta sunt vitae. A ad aliquam amet animi, autem commodi
            deleniti, deserunt distinctio dolor doloribus, harum maiores molestias officiis omnis perspiciatis suscipit
            ullam.
        </div>
        <div>Adipisci atque culpa incidunt neque, nisi quasi repellat vitae. Asperiores delectus dolor enim error esse,
            quo repudiandae saepe? Aperiam debitis deserunt facere labore mollitia provident repudiandae similique velit
            voluptas voluptatibus?
        </div>

    </div>
</body>
</html>